<script setup>
// 实物去向
import { ref,onMounted,reactive, nextTick} from 'vue'
import {  orderlistApi,orderinfoApi} from '../../api/index'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useStorage } from '@vueuse/core'
import { useRouter, useRoute } from 'vue-router'
const tableheight = ref('600px')
const velist = ref([])
const pageSize2 = ref(10)
const currentPage2 = ref(1)
const datalist = ref([])
const data = reactive({
	limit: 10,
	page:1
})
const total = ref()
// 获取订单列表	
const getlist = async function () {
	const msg = await orderlistApi(data)
	if (msg.data.code == 0) {
		velist.value = msg.data.data
		total.value = msg.data.total
	}
}

const handleCurrentChange = function (val) {
	data.page = val
	getlist()
}

const getinfo = async function (val) {
	const msg = await orderinfoApi({ Id: val })
		if (msg.data.code == 0) {
			datalist.value = msg.data.data.list
		}
}


const chngd = function (val) {
	if (val) {
		getinfo(val)
	}
}
onMounted(() => {
  if (useStorage('token').value !== undefined) {
	  getlist()
	}
})

</script>
<template>
   <div class="member_right" >
		<div class="right_main main_top" >
			<div v-if="velist.length>0">
				<el-collapse accordion @change="chngd">
				<el-collapse-item :name="item.id" v-for="(item,index) in velist" :key="item.id">
					<template #title>
						<div style="display: flex;align-items: center;margin-left: 7px;border-right: 1px solid #ebeef5;;width: 500px;">
							订单号:{{ item.orderId }}
						</div>
						<div style="display: flex;align-items: center;margin-left: 7px;">
							回收日期:{{ item.recycle_Time }}
						</div>
					</template>
					<div>
					<el-table :data="datalist" border  style="width:100%;" :height="tableheight"  :cell-style="{height:'18px'}" :header-cell-style="{ height:'25px',color: '#818693',background:'#f3f4f7'}">
					<el-table-column label="Id"  width="70" >
					<template #default="scope">
						<div style="font-size: 14px;">{{ scope.row.id }}</div>
					</template>
					</el-table-column>
					<el-table-column label="物品分类"  width="120" >
					<template #default="scope">
						<div style="font-size: 14px;">{{ scope.row.orderProducts }}</div>
					</template>
					</el-table-column>
					<el-table-column label="物品名称"   >
					<template #default="scope">
						<div style="font-size: 14px;">{{ scope.row.title }}</div>
					</template>
					</el-table-column>
					<el-table-column label="品牌"  width="100" >
					<template #default="scope">
						<div style="font-size: 14px;">{{ scope.row.brand }}</div>
					</template>
					</el-table-column>
					<el-table-column label="规格型号"  width="140" >
					<template #default="scope">
						<div style="font-size: 14px;">{{ scope.row.specification }}</div>
					</template>
					</el-table-column>
					<el-table-column label="单位"  width="100" >
					<template #default="scope">
						<div style="font-size: 14px;">{{ scope.row.unit }}</div>
					</template>
					</el-table-column>
					<el-table-column label="数量"  width="80" >
					<template #default="scope">
						<div style="font-size: 14px;">{{ scope.row.count }}</div>
					</template>
					</el-table-column>
					<el-table-column label="审批状态"  width="100" >
					<template #default="scope">
						<div style="font-size: 14px;" v-if="scope.row.examine == 1">未审批</div>
						<div style="font-size: 14px;" v-if="scope.row.examine == 2">已审批</div>
					</template>
					</el-table-column>
					<el-table-column label="处置状态"  width="100" >
					<template #default="scope">
						<div style="font-size: 14px;" v-if="scope.row.disposal == 1">损坏</div>
						<div style="font-size: 14px;" v-if="scope.row.disposal == 2">淘汰</div>
						<div style="font-size: 14px;" v-if="scope.row.disposal == 3">其他</div>
					</template>
					</el-table-column>
					<el-table-column label="实物去向"  width="180" >
					<template #default="scope">
						<div style="font-size: 14px;">{{ scope.row.destinationText }}</div>
					</template>
					</el-table-column>
					<template v-slot:empty>
						<el-empty :image-size="130" description="" />
					</template>
				</el-table>
					</div>
				</el-collapse-item>
			</el-collapse>
			</div>
			<div v-else style="margin-bottom: 20px;">
				暂无数据
			</div>
			<div class="page" style="clear:both;display: flex;justify-content: center">
			<span class="Notices">共<strong>{{ total }}</strong>条数据,分<strong>{{ Math.ceil(total/10) }}</strong>页显示,当前为第<strong>{{ currentPage2 }}</strong>页。</span>
			<el-pagination
					v-model:current-page="currentPage2"
					v-model:page-size="pageSize2"
					:small="small"
					background
					:disabled="disabled"
					:background="background"
					layout="prev, pager, next"
					:total="total"
					@size-change="handleSizeChange"
					@current-change="handleCurrentChange"
					/>
			</div>
		</div>
  	</div>
      <div style="clear:both;"></div>
</template>
<style scoped>
.dd{
    width: 300px;
    background-color: red;
    display: flex;
    transition: all 1s;
}
.ds{
    width: 300px;
    background-color:green;
    display: flex;
    transition: all 1s;
}

.ahover:hover{
	color: #FF7F00 !important;
}

</style>